<template>
	<view>
		<view class="titbox">
			<view class="title">请前往自提点取货</view>
			<!-- <view class="time">还剩2天5小时自动收货</view> -->
		</view>
		<view class="infobox">
			<view class="namebox">自提地址：{{ myinfo.community_name }}</view>
			<view class="infodetail">
				<view class="leftbox">
					<view class="place">自提点：{{ myinfo.community_address }}</view>
					<view class="time">营业时间：10:00-20:30</view>
					<view class="desc">具体取货时间可联系自提点</view>
				</view>
				<view class="rightbox">
					<image :src="myinfo.community_img"></image>
				</view>
			</view>
			<view class="infobut">
				<view class="but" @click="open()">
					<image src="../../static/code.png"></image>
					<view>出示自提码</view>
				</view>
				<view class="but" @click="makephone()">
					<image src="../../static/phone.png"></image>
					<view>联系自提点</view>
				</view>
			</view>
			<view class="placebox">
				<view class="placeinfo"
					>自提点：{{ myinfo.community_name }} {{ myinfo.community_address }}|
					<text style="margin: 0 10rpx" @click="copyText(order.order_sn)">复制</text>
				</view>
				<view class="navigation" @click="tomaps()">
					<image src="../../static/dh.png"></image>
					<view>导航</view>
				</view>
			</view>
		</view>
		<view class="goodsbox" v-for="(item, index) in order.goods" :key="index">
			<view class="goodinfo" :style="{ border: index == 1 ? 'none' : '' }">
				<view class="goodsitem">
					<view class="leftbox">
						<image :src="item.url"></image>
					</view>
					<view class="rightbox">
						<view class="namebox">{{ item.goods_title }}</view>
						<view class="spec">X{{ item.goods_num }}</view>
						<view class="price">
							<view>￥{{ parseFloat(item.goods_price) }}</view>
							<!--re_status 0已支付1待退款2已退款 -->
							<view>{{ item.re_status == 0 ? "已支付" : item.re_status == 1 ? "待退款" : "已退款" }}</view>
						</view>
					</view>
				</view>
				<!-- <view class="butbox">
					<view>申请退款</view>
				</view> -->
			</view>
		</view>
		<view class="orderinfo">
			<view class="tit">订单信息</view>
			<view class="linebox">
				<view class="name">订单号</view>
				<view class="info">
					<view>{{ order.order_sn }} <text style="color: #ff8a9b" @click="copyText(order.order_sn)">复制</text></view>
				</view>
			</view>
			<view class="linebox">
				<view class="name">合计付款</view>
				<view class="info">
					<view
						><text v-if="parseInt(scorePrice) > 0">{{ scorePrice }}</text
						><text v-if="parseInt(scorePrice) > 0" style="font-size: 28rpx">积分+</text>￥{{ totalPrice }}</view
					>
				</view>
			</view>
			<view class="linebox">
				<view class="name">支付方式</view>
				<view class="info">
					<view>在线支付</view>
				</view>
			</view>
			<view class="linebox">
				<view class="name">下单时间</view>
				<view class="info">
					<view>{{ order.addtime }}</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="writebox">
				<view class="titlebox">核销二维码</view>
				<image class="closen" src="../../static/off.png" @click="close"></image>
				<view class="xian"></view>
				<view class="codeimg">
					<image :src="baseUrl + order.pick_code"></image>
				</view>
				<view class="butbox">
					<view class="writebox" @click="close">取消</view>
					<view class="colorbut" @click="saveimg">保存图片</view>
				</view>
			</view>
		</uni-popup>
		<view style="height: 125rpx"></view>
		<view class="navbut">
			<!-- status 0待付款 1待发货/待自提 2待收货/已自提 3待评价  4已取消  5售后退款中  6已完成  7售后完成 -->
			<view class="writebut" v-if="order.status == 0" @click="wechatPay(order.id)">去付款</view>
			<view class="writebut" v-if="order.status == 1" @click="toservice(order.id)">申请售后</view>
			<view class="colorbut" v-if="order.status == 1" @click="open()">待自提</view>
			<view class="colorbut" v-if="order.status == 2">已自提</view>
			<view class="colorbut" v-if="order.status == 3" @click="appraise(order.id)">去评价</view>
			<view class="colorbut" v-if="order.status == 4">已取消</view>
			<view class="colorbut" v-if="order.status == 5">售后退款中</view>
			<view class="colorbut" v-if="order.status == 6">已完成</view>
			<view class="colorbut" v-if="order.status == 7">售后完成</view>
		</view>
	</view>
</template>

<script>
import { baseUrl } from "../../setting"
export default {
	data() {
		return {
			id: "",
			order: {},
			mapbox: false,
			myinfo: {},
			baseUrl,
		}
	},
	onLoad(option) {
		this.id = option.id
		this.getOrderInfo()
		this.getmyinfo()
	},
	onShow() {
		this.getOrderInfo()
		this.getmyinfo()
	},
	computed: {
		// 计算选中商品数量
		// totalNum() {
		// 	let totalNum = 0;
		// 	this.list.map(item => {
		// 		item.flag ? totalNum += item.count : totalNum += 0
		// 	})
		// 	return totalNum
		// },

		scorePrice() {
			console.log(this.list)
			let scorePrice = 0
			this.order.goods.map((item) => {
				scorePrice += item.num * parseFloat(item.score)
			})
			console.log(scorePrice)
			return scorePrice
		},
		//计算选中商品的总价
		totalPrice() {
			console.log(this.list)
			let totalPrice = 0
			this.order.goods.map((item) => {
				totalPrice += item.goods_num * parseFloat(item.goods_price)
			})
			console.log(totalPrice)
			return totalPrice
			// return parseFloat(totalPrice.toFixed(2)) // 保留小数点后2位
		},
	},
	methods: {
		open() {
			if (this.order.status == 1) {
				this.$refs.popup.open("center")
			} else {
				uni.showToast({
					title: "自提码已不能打开",
					icon: "none",
				})
			}
			// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
		},
		close() {
			this.$refs.popup.close()
		},
		getmyinfo() {
			this.$http({
				url: "/api/Course/user_info",
			}).then((res) => {
				this.myinfo = res.data
			})
		},
		async getOrderInfo() {
			try {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				let { data } = await this.$http({
					url: "/api/Wechat/orderDetail",
					data: {
						orderid: this.id,
					},
				})
				this.order = data
			} finally {
				uni.hideLoading()
			}
		},
		// 发表评价按钮
		appraise(id) {
			uni.navigateTo({
				url: "/pageshop/appraise/appraise?id=" + id,
			})
		},
		//售后
		toservice(id) {
			uni.navigateTo({
				url: "/pageshop/goodsrefound/goodsrefound?id=" + id,
			})
		},
		//支付
		// 获取微信支付参数
		async wechatPay(orderid) {
			const { data } = await this.$http({
				url: "/api/wxpay/order_pays",
				data: {
					orderid,
				},
			})
			let that = this
			uni.requestPayment({
				timeStamp: data.timeStamp,
				nonceStr: data.nonceStr,
				package: data.package,
				signType: "MD5",
				paySign: data.paySign,
				success: function (res) {
					uni.showToast({
						title: "支付成功",
						icon: "none",
					})
					setTimeout(() => {
						console.log(that.delivery_method, "this.delivery_method")
						uni.reLaunch({
							// url:'/pages/orderGoods/orderGoods?type='+(5)+'&currindex=' + this.delivery_method
							url: "/pageshop/orderlist/orderlist?type=" + 1 + "&currindex=" + 1, ///0==物流订单，1==自提订单
						})
					}, 1000)
				},
				fail: function (res) {
					uni.showToast({
						title: "支付失败",
						icon: "none",
					})
				},
			})
		},
		// 复制订单号
		copyText(text) {
			uni.setClipboardData({
				data: text,
				success: () => {
					uni.showToast({
						title: "复制成功",
					})
				},
				fail: () => {
					uni.showToast({
						title: "复制失败",
						icon: "none",
					})
				},
			})
		},
		//拨打电话
		makephone() {
			uni.makePhoneCall({
				phoneNumber: this.myinfo.community_mobile, //仅为示例
			})
		},
	
		saveimg() {
			uni.downloadFile({
				url: uni.baseUrl + this.order.pick_code, //图片地址
				success: function (res) {
					//图片保存到本地
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: function (data) {
							uni.hideLoading()
							uni.showModal({
								title: "提示",
								content: "您的二维码已保存到相册",
								showCancel: false,
							})
						},
						fail: function (err) {
							if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
								// 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
								uni.showModal({
									title: "提示",
									content: "需要您授权保存相册",
									showCancel: false,
									success: (modalSuccess) => {
										uni.openSetting({
											success(settingdata) {
												console.log("settingdata", settingdata)
												if (settingdata.authSetting["scope.writePhotosAlbum"]) {
													uni.showModal({
														title: "提示",
														content: "获取权限成功,再次点击图片即可保存",
														showCancel: false,
													})
												} else {
													uni.showModal({
														title: "提示",
														content: "获取权限失败，将无法保存到相册哦~",
														showCancel: false,
													})
												}
											},
											fail(failData) {
												console.log("failData", failData)
											},
											complete(finishData) {
												console.log("finishData", finishData)
											},
										})
									},
								})
							}
						},
						complete(res) {
							uni.hideLoading()
						},
					})
				},
			})
		},
		tomaps() {
			uni.navigateTo({
				url: "/pageshop/maps/maps?longitude=" + this.order.longitude + "&latitude=" + this.order.latitude + "&address=" + this.myinfo.community_address,
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.titbox {
	width: 690rpx;
	padding: 0 30rpx;
	height: 86rpx;
	.title {
		height: 86rpx;
		line-height: 86rpx;
		font-size: 36rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
	}
	.time {
		font-size: 26rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #888888;
	}
}
.infobox {
	width: 690rpx;
	padding: 0 30rpx;
	// height: 474rpx;
	background: #ffffff;
	border-radius: 0rpx 0rpx 10rpx 10rpx;
	margin-bottom: 24rpx;
	.namebox {
		height: 114rpx;
		border-bottom: solid 2rpx #f2f2f2;
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		line-height: 114rpx;
	}
	.infodetail {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 24rpx 0;
		.leftbox {
			width: 530rpx;
			.place {
				font-size: 32rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #222222;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.time {
				font-size: 26rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #888888;
				margin: 20rpx 0;
			}
			.desc {
				font-size: 26rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #888888;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.rightbox {
			width: 160rpx;
			text-align: right;
			image {
				width: 150rpx;
				height: 150rpx;
			}
		}
	}
	.infobut {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		.but {
			width: 230rpx;
			height: 56rpx;
			border-radius: 36rpx;
			border: 2rpx solid #888888;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
			margin-right: 24rpx;
			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 16rpx;
			}
		}
	}
	.placebox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #222222;
		border-top: solid 2rpx #f2f2f2;
		padding: 30rpx 0;
		.placeinfo {
			width: 500rpx;
		}
		.navigation {
			width: 144rpx;
			height: 56rpx;
			background: #fff4f6;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 29rpx;
				height: 29rpx;
				margin-right: 14rpx;
			}
		}
	}
}
.goodsbox {
	width: 690rpx;
	padding: 20rpx 30rpx;
	background: #ffffff;
	.goodinfo {
		border-bottom: 2px dashed #f2f2f2;
		.goodsitem {
			display: flex;
			align-items: center;
			.leftbox {
				width: 186rpx;
				image {
					width: 160rpx;
					height: 160rpx;
					background: #ffffff;
					border-radius: 6rpx;
				}
			}
			.rightbox {
				width: 504rpx;
				.namebox {
					font-size: 36rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.spec {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #555555;
					margin: 10rpx 0;
				}
				.price {
					font-size: 32rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
		.butbox {
			height: 106rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			> view {
				width: 192rpx;
				height: 68rpx;
				border-radius: 36rpx;
				border: 2rpx solid #888888;
				text-align: center;
				line-height: 68rpx;
			}
		}
	}
}
.orderinfo {
	width: 690rpx;
	padding: 40rpx 30rpx 0 30rpx;
	background: #ffffff;
	border-radius: 20rpx;
	margin-top: 24rpx;
	.tit {
		font-size: 40rpx;
		font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
		font-weight: normal;
		color: #ff6178;
	}
	.linebox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
		height: 88rpx;
		.name {
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #666666;
		}
	}
}
.navbut {
	position: fixed;
	bottom: 0;
	display: flex;
	background-color: #fff;
	width: 100%;
	height: 112rpx;
	font-size: 32rpx;
	font-family: Source Han Sans CN-Medium, Source Han Sans CN;
	font-weight: 500;
	justify-content: flex-end;
	z-index: 99;
	.writebut {
		width: fit-content;
		padding: 0 32rpx;
		height: 68rpx;
		border-radius: 36rpx;
		opacity: 1;
		border: 2rpx solid #888888;
		line-height: 68rpx;
		color: #222222;
		margin-right: 20rpx;
		margin-top: 15rpx;
	}
	.colorbut {
		margin-top: 15rpx;
		width: fit-content;
		padding: 0 32rpx;
		height: 68rpx;
		border-radius: 36rpx;
		opacity: 1;
		border: 2rpx solid #ff8a9b;
		line-height: 68rpx;
		color: #fff;
		background-color: #ff8a9b;
		margin-right: 30rpx;
	}
}
.writebox {
	width: 607rpx;
	height: 788rpx;
	background: #ffffff;
	border-radius: 14rpx;
	margin: 0 auto;
	position: relative;
	.titlebox {
		height: 128rpx;
		text-align: center;
		line-height: 128rpx;
		font-size: 36rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #222222;
	}
	.closen {
		position: absolute;
		width: 36rpx;
		height: 36rpx;
		top: 30rpx;
		right: 30rpx;
	}
	.xian {
		width: 469rpx;
		height: 2rpx;
		background: #eeeeee;
		margin: 0 auto;
	}
	.codeimg {
		width: 469rpx;
		margin: 48rpx auto;
		text-align: center;
		image {
			width: 420rpx;
			height: 420rpx;
		}
	}
	.butbox {
		width: 469rpx;
		display: flex;
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		margin: 0 auto;
		justify-content: space-between;
		align-items: center;
		.writebox {
			width: 226rpx;
			height: 68rpx;
			border-radius: 36rpx;
			border: 2rpx solid #888888;
			line-height: 68rpx;
			text-align: center;
			color: #222222;
		}
		.colorbut {
			width: 226rpx;
			height: 68rpx;
			background: #ff8a9b;
			border-radius: 36rpx;
			border: 2rpx solid #ff8a9b;
			color: #fff;
			line-height: 68rpx;
			text-align: center;
		}
	}
}
</style>
